﻿@using Web.Core.Components
@using Web.Core.Extensions
@model Web.Pay.Models.RechargeControllerModel.Index
<div class="ui-box ui-box-alpha">
    <div class="ui-box-head">
        <div class="ui-box-head-border">
            <div class="ui-box-head-title">
                收银台</div>
            <span class="ui-box-head-text">充 值</span> <a href="#" class="ui-box-head-more">去购物</a>
        </div>
    </div>
    <div class="ui-box-container">
        <div class="ui-box-content">
            <div class="row">
                <div class="col-md-4">
                    充值账户： <span class="ft-weight-bold">@(User.Identity.Name)</span>
                </div>
                <div class="col-md-4">
                    账户余额：<span class="ft-green ft-weight-bold"> <small class="ft-gray ft-weight-normal">
                        (元)</small></span>
                </div>
                <div class="col-md-4">
                    <span>充值资金不能用于提现。</span>
                </div>
            </div>
        </div>
    </div>
    <div class="ui-box-container">
        <div class="ui-box-content-noborder">
            <div class="row">
                <div class="col-md-2">
                    <div style="border-right: 1px solid #ddd;">
                        <ul class="nav nav-tabs nav-tabs-left">
                            <li class="active"><a href="#home" data-toggle="tab" style="border-top: none;">网银支付</a></li>
                            <li><a href="#profile" data-toggle="tab">手机充值卡支付</a></li>
                            <li><a href="#messages" data-toggle="tab">Messages</a></li>
                            <li><a href="#settings" data-toggle="tab">Settings</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-10">
                    <div class="tab-content">
                        <div class="tab-pane active" id="home">
                            <form id="recharge-by-debit-card" action="/recharge/debit" method="get" onsubmit="return rechargeSubmit(this);">
                            <div class="form-group">
                                <h4>
                                    选择礼包<small>Secondary text</small></h4>
                                <div class="thumbnails">
                                    <div class="row">
                                        @foreach (var o in Model.Packages)
                                        {
                                            <div class="col-md-3">
                                                <a href="#" class="thumbnail">
                                                    <img data-src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%;
                                                        display: block;" src="">
                                                </a>
                                                <h4>
                                                    @o.Title</h4>
                                                <p>
                                                    @o.Description</p>
                                            </div>
                                        }
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="ebank ebank-express">
                                    <p>
                                        快捷支付</p>
                                    <ul class="list-inline">
                                        @foreach (var e in Model.EBanks)
                                        {
                                            <li>
                                                <label title="@(e.PaymentBank.Name)">
                                                    <input type="radio" name="param" value="@(e.Id)" data-platform="@(e.PlatformId)"/>
                                                    <img alt="@(e.PaymentBank.Name)" src="@(WebSite.Static + e.PaymentBank.Image)" />
                                                </label>
                                            </li>
                                        }
                                    </ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="ebank">
                                    <ul class="list-inline">
                                        @foreach (var e in Model.EBanks)
                                        {
                                            <li>
                                                <label title="@(e.PaymentBank.Name)">
                                                    <input type="radio" name="ebank" value="@(e.Id)" data-platform="@(e.PlatformId)"/>
                                                    <img alt="@(e.PaymentBank.Name)" src="@(WebSite.Static + e.PaymentBank.Image)" />
                                                </label>
                                            </li>
                                        }
                                    </ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-2">
                                    <input type="hidden" id="package" name="package" value="0" />
                                    <button class="btn btn-danger btn-lg" type="submit">
                                        下一步</button></div>
                                <div class="col-md-10">
                                </div>
                            </div>
                            </form>
                        </div>
                        <div class="tab-pane" id="profile">
                            <form>
                            <div class="form-group">
                                <table class="pure-table pure-table-bordered">
                                    <caption>
                                        您的付款金额可能超限，限额如下
                                    </caption>
                                    <thead>
                                        <tr>
                                            <th>
                                                每日限额（元）
                                            </th>
                                            <th>
                                                使用范围
                                            </th>
                                            <th>
                                                手续费
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                5000
                                            </td>
                                            <td>
                                                全国神州行卡、联通一卡充
                                            </td>
                                            <td>
                                                按面值的5%收取。
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="form-group">
                                <table class="pure-table pure-table-bordered">
                                    <thead>
                                        <tr>
                                            <th>
                                                提 醒
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                1. 暂不支持100元以上的充值卡。
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                2. 请核对卡面值与选择的面值是否一致，当卡面值大于选择的面值时，您将损失差额。
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="form-group">
                                <table class="pure-table pure-table-bordered">
                                    <thead>
                                        <tr>
                                            <th>
                                                面 值
                                            </th>
                                            <th>
                                                卡 号
                                            </th>
                                            <th>
                                                密 码
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <select style="width: 150px;">
                                                    <option value="">选择面值</option>
                                                    <option value="30">30</option>
                                                    <option value="50">50</option>
                                                    <option value="100">100</option>
                                                </select>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" maxlength="17" required="required" placeholder="请输入卡号" />
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" required="required" placeholder="请输入卡密" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="form-group">
                                <p class="form-control-static">
                                    实际到账金额：</p>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-2">
                                    <input type="hidden" id="package" name="package" value="0" />
                                    <button class="btn btn-danger btn-lg" type="submit">
                                        确认充值</button></div>
                                <div class="col-md-10">
                                </div>
                            </div>
                            </form>
                        </div>
                        <div class="tab-pane" id="messages">
                            ...</div>
                        <div class="tab-pane" id="settings">
                            ...</div>
                    </div>
                    <div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="">
        asdfasf</div>
</div>
@section css{
    <style type="text/css">
        
    </style>
}
@section js
{
    <script type="text/javascript">
        $(function () {
            $("select").select2();
        });
        function setPackage(obj, val) {
            $('.package-item').removeClass('package-item-selected');
            $(obj).addClass('package-item-selected');
            document.getElementById('package').value = val;
        }

        function rechargeSubmit(form) {
            if ($("input:checked").length != 1) {

                return false;
            }
            return true;
        }
    </script>
}
